<!--------------------------------
 --------------------------------->

<template>
  <CommonPage>
    <template #action />

    <MeCrud ref="$table" v-model:query-items="queryItems" :scroll-x="1200" :columns="columns" :get-data="api.read">
      <MeQueryItem label="商品名" :label-width="50">
        <n-input v-model:value="queryItems.goodsName" type="text" placeholder="请输入用户名" clearable />
      </MeQueryItem>
    </MeCrud>
  </CommonPage>
  <!-- -----------------新增商品属性------------------------ -->
  <MeModal ref="$modalMemberRecharge">
    <n-form
      :model="model" :rules="rules" label-placement="left" label-width="auto"
      require-mark-placement="right-hanging"
    >
      <n-form-item label="姓名">
        <n-input v-model:value="memberRechargeForm.name" :disabled="true" />
      </n-form-item>
      <n-form-item label="手机号">
        <n-input v-model:value="memberRechargeForm.mobile" :disabled="true" />
      </n-form-item>
      <n-form-item label="当前余额">
        <n-input-number v-model:value="memberRechargeForm.balance" :disabled="true">
          <template #suffix>
            元
          </template>
        </n-input-number>
      </n-form-item>
      <!-- <n-form-item label="充值后余额">
        <n-input-number v-model:value="memberRechargeForm.addBalance" :disabled="true">
          <template #suffix>
            元
          </template>
        </n-input-number>
      </n-form-item> -->
      <n-form-item label="充值金额" path="goodsPics">
        <n-input-number v-model:value="memberRechargeForm.addBalance">
          <template #suffix>
            元
          </template>
        </n-input-number>
      </n-form-item>
    </n-form>
  </MeModal>
</template>

<script setup>
import { MeCrud, MeModal, MeQueryItem } from '@/components'
import { useModal } from '@/composables'
import { NButton, NTag } from 'naive-ui'
import api from './api'

defineOptions({ name: 'GoodsMgt' })
const router = useRouter()
const $table = ref(null)
/** QueryBar筛选参数（可选） */
const queryItems = ref({})
const [$modalMemberRecharge] = useModal()
const memberRechargeForm = ref({})
onMounted(() => {
  $table.value?.handleSearch()
})

const columns = [
  { title: '姓名', key: 'name', width: 80 },
  {
    title: '性别',
    key: 'sex',
    width: 50,
    render(row) {
      return [
        h(
          NTag,
          {
            bordered: 'false',
            type: 'warning',
          },
          {
            default: () => {
              if (row.sex === 'w') {
                return '女'
              }
              else {
                return '男'
              }
            },
          },
        ),
      ]
    },
  },
  {
    title: '手机号',
    key: 'mobile',
    width: 100,
  },
  { title: '累计积分', key: 'totalScore', width: 80 },
  {
    title: '可用积分',
    key: 'availableScore',
    width: 80,
  },
  {
    title: '余额',
    key: 'balance',
    width: 80,
  },
  {
    title: '消费次数',
    key: 'consumedTimes',
    width: 80,
  },
  {
    title: '操作',
    key: 'actions',
    width: 320,
    fixed: 'right',
    render(row) {
      return [
        h(
          NButton,
          {
            size: 'small',
            type: 'primary',
            secondary: true,
            onClick: () =>
              router.push({ path: '/wxapp/member/details', query: { memberName: row.name, memberId: row.id } }),
          },
          {
            default: () => '详情',
            icon: () => h('i', { class: 'i-fe:user-plus text-14' }),
          },
        ),
        h(
          NButton,
          {
            size: 'small',
            type: 'primary',
            secondary: true,
            onClick: () =>
              openModalMemberRecharge(row),
          },
          {
            default: () => '充值',
            icon: () => h('i', { class: 'i-fe:user-plus text-14' }),
          },
        ),
      ]
    },
  },
]
function openModalMemberRecharge(entity) {
  memberRechargeForm.value = entity
  $modalMemberRecharge.value?.open({
    title: '会员充值',
    width: '400px',
    okText: '确定',
    cancelText: '取消',
    async onOk() {
      const chargeForm = memberRechargeForm.value
      chargeForm.balance = chargeForm.balance + chargeForm.addBalance
      chargeForm.remark = '手动充值'
      await api.memberRecharge(chargeForm)
    },
    onCancel(message) {
      $message.info(message ?? '已取消')
    },
  })
}
</script>
